<template>
  <view>
    <view v-if="list.length">
      <view v-for="i in list" :key="i.id" class="p-20rpx border_b">
        <view class="flex items-center justify-start">
          <image :src="i.avatar" class="w-80rpx h-80rpx rounded-full"></image>
          <view class="ml-16rpx">
            <view class="text-first text-base">{{ i.name }}</view>
            <view class="text-third text-sm">{{ i.time }}</view>
          </view>
        </view>
        <view class="ml-90rpx">
          <view class="py-10rpx">{{ i.content }}</view>
          <view class="flex flex-wrap">
            <view
              v-for="(item, index) in i.imgList"
              :key="index"
              class="mr-20rpx mb-20rpx rounded-8rpx"
              @click="() => handleImage(i.imgList, index)"
            >
              <u-image
                mode="aspectFill"
                width="180rpx"
                height="180rpx"
                :src="item"
              />
            </view>
          </view>
          <view v-if="!i.grider" class="text-sm text-third flex items-center">
            <u-icon name="map" color="#999" size="12"></u-icon>
            {{ i.address }}
          </view>
        </view>
      </view>
    </view>
    <u-empty
      v-else
      margin-top="36%"
      icon="https://ui-resourse.oss-cn-shenzhen.aliyuncs.com/picture/2022/03/17/aUXPlIYfLUqWTgQl.png"
      text="暂无数据"
    />
  </view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

import { userStore } from '@/store'
const Components: Function = Component
@Components({ name: 'WorkRecord' })
export default class WorkRecord extends Vue {
  list: Recordable = []
  async onLoad() {
    const db = wx.cloud.database()

    if (userStore.authInfo?.powerType === 'grider') {
      const { data: list } = await db
        .collection('commandList')
        .where({ grider: userStore.authInfo.name })
        .orderBy('time', 'desc')
        .get()
      this.list = list
      uni.setNavigationBarTitle({ title: '指令记录' })
    } else {
      const { data: list } = await db
        .collection('reportList')
        .orderBy('time', 'desc')
        .get()
      this.list = list
    }
  }
  sdasd(a) {
    console.log(a)
  }
  handleImage(imgList: any, index: any) {
    uni.previewImage({ urls: imgList, current: index })
  }
}
</script>

<style lang="scss" scoped>
.border_b {
  border-bottom: 1rpx solid #eee;
  &:last-child {
    border: none;
  }
}
</style>
